<template>
  <el-dialog v-loading="loading" :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-col :span="24">
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '150px' : '150px'">
        <!-- <el-col :span="24">
          <el-form-item :label="$t('sysOss.bizId')" prop="bizId">
            <el-input v-model="dataForm.bizId" :placeholder="$t('sysOss.bizId')" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('sysOss.dirValue')" prop="dirValue">
            <el-input v-model="dataForm.dirValue" :placeholder="$t('sysOss.dirValue')" clearable></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-form-item :label="'附件'">
            <el-upload class="upload-demo" ref="upload" :auto-upload="false" v-bind="uploadProps" :data="uploadData" :file-list="fileList">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24">
          <el-form-item :label="'图片'">
            <el-upload class="uni-upload-pro" ref="upload1" :auto-upload="false" v-bind="uploadProps" :data="uploadData1"
              :file-list="fileList1" list-type="picture-card" drag multiple>
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="'图片'">
            <el-upload class="uni-upload-pro" ref="upload2" :auto-upload="false" v-bind="uploadProps" :data="uploadData2"
              :file-list="fileList2" list-type="picture" drag multiple>
              <i class="el-icon-upload"></i>
            </el-upload>
          </el-form-item>
        </el-col> -->
      </el-form>
    </el-col>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'

export default {
  data () {
    return {
      loading: false,
      visible: false,
      dataForm: {
        id: '',
        url: '',
        fileClass: '',
        fileContentType: '',
        fileExt: '',
        fileSize: '',
        fileMd5: '',
        fileOriName: '',
        fileSaveName: '',
        bizId: '1234567890',
        dirValue: 'HT',
        ossType: '',
        ossId: '',
        localPhysicalPathname: '',
        creator: '',
        createDate: '',
        updater: '',
        updateDate: '',
        version: ''
      },
      uploadProps: {
        action: `${window.SITE_CONFIG['apiURL']}/sys/oss/upload`,
        // 'on-preview': this.handlePreview,
        'on-remove': this.handleRemove,
        'on-success': this.handleSuccess,
        'on-exceed': this.handleExceed,
        limit: 2
      },
      // totalUpload: 0,
      uploadData: {
        token: this.$cookies.get('token')
      },
      fileList: []
      // uploadData1: {
      //   token: Cookies.get('token')
      // },
      // fileList1: [],
      // uploadData2: {
      //   token: Cookies.get('token')
      // },
      // fileList2: []
    }
  },
  computed: {
    dataRule () {
      return {
      }
    }
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        this.fileList = []
        // this.fileList1 = []
        // this.fileList2 = []
      })
    },
    submitUpload () {
      this.uploadData = {
        ...this.uploadData,
        bizId: '0987654321',
        dirValue: 'HT01',
        fileClass: 'file'
      }
      console.log('this.uploadData', this.uploadData)
      this.uploadData.token = this.$cookies.get('token')
      // this.uploadData1 = {
      //   ...this.uploadData,
      //   bizId: '0987654321',
      //   dirValue: 'HT02',
      //   fileClass: 'image'
      // }
      // this.uploadData2 = {
      //   ...this.uploadData,
      //   bizId: '0987654321',
      //   dirValue: 'HT03',
      //   fileClass: 'image'
      // }
      this.$nextTick(() => {
        this.$refs.upload.submit()
        // this.$refs.upload1.submit()
        // this.$refs.upload2.submit()
      })
    },
    handleRemove (file, fileList) {
      // console.log(file, fileList)
    },
    handlePreview (file) {
      // console.log(file)
    },
    // checkAllUpload () {
    //   let bo = this.fileList.every((item, index, array) => {
    //     return item.status === 'success'
    //   })
    //   let bo1 = this.fileList1.every((item, index, array) => {
    //     return item.status === 'success'
    //   })
    //   let bo2 = this.fileList2.every((item, index, array) => {
    //     return item.status === 'success'
    //   })
    //   if (bo && bo1 && bo2) {
    //     return true
    //   }
    //   return false
    // },
    handleSuccess (response, file, fileList) {
      // console.log('handleSuccess')
      // console.log(response, file, fileList)
      // this.totalUpload = this.totalUpload + 1
      // console.log('totalUpload', this.totalUpload)

      // console.log(this.fileList, this.fileList1, this.fileList2)

      // if (this.checkAllUpload()) {
      // console.log('handleSuccess-all')
      // 执行其他业务操作
      this.$message({
        message: this.$t('prompt.success'),
        type: 'success',
        duration: 500,
        onClose: () => {
          this.visible = false
          this.$emit('refreshDataList')
        }
      })
      // } else {
      //   this.$message.error('上传文件失败')
      // }
    },
    handleExceed (files, fileList) {
      this.$message.error('最多上传数量：' + this.uploadProps.limit)
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.submitUpload()
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>

<style>
/* .uni-upload-pro .el-upload-dragger {
  height: 100%;
  width: 100%;
}
.uni-upload-pro .el-upload--picture-card,
.uni-upload-pro .el-upload--picture {
  border: 0px;
}
.uni-upload-pro .el-upload--picture {
  width: 100%;
}
.uni-upload-pro .el-upload-dragger .el-icon-upload,
.uni-upload-pro .el-upload-dragger .el-icon-plus {
  margin: 0px 0 0px 0;
  height: 100%;
  width: 100%;
  border: 0px;
} */
</style>
